<!DOCTYPE HTML>
<html>
<head>
  <title>登录</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

  <!-- jquery -->
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <!-- bootstrap -->
  <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
  <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
  <!-- jquery-validator -->
  <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>
  <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
  <!-- layer -->
  <script type="text/javascript" src="/layer/layer.js"></script>
  <!-- md5.js -->
  <script type="text/javascript" src="/js/md5.min.js"></script>
  <!-- common.js -->
  <script type="text/javascript" src="/js/common.js"></script>

</head>
<style>
  #logo {
    position: relative;
    wid 300px;
    margin: 10px 0;
    height: 60px;
}
  .loginArea {
    background: url(https://img11.360buyimg.com/da/jfs/t16363/164/2298198848/33213/870500f1/5aa68632Nd7790d0c.png) 0px 0px no-repeat;
    background-color: #e93854;
    height: 475px;
    position: relative;
  }
  #loginForm {
    position: absolute;
    top: 30px;
    right: 20%;
    padding: 35px;
    wid 350px;
    background-color: #fff;
  }
  .btn-login {
    background-color: #e4393c;
    margin-top: 10px;
    font-size: 1.2em;
    color: #fff;
    letter-spacing: 1.2em;
  } 
  .row {
    height: 30px;
    line-height: 30px;
    margin-bottom: 30px;
  }

</style>
<body>
  <div id="logo">
    <a href="#">
        <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" alt="京东" width="170" height="60"/>
    </a>
    <b></b>
</div>
<div class="loginArea">
<form name="loginForm" id="loginForm" method="post">

  <h3 style="margin-bottom: 40px">用户登录</h3>

  <div class="form-group">
    <div class="row">
      <label class="form-label col-md-3">用户名</label>
      <div class="col-md-9">
        <input id="mobile" name="mobile" class="form-control" type="text" placeholder="手机号码"
          minlength="11" maxlength="11"/>
      </div>
      <div class="col-md-1">
      </div>
    </div>
  </div>

  <div class="form-group">
    <div class="row">
      <label class="form-label col-md-3">密&nbsp;&nbsp;码</label>
      <div class="col-md-9">
        <input id="password" name="password" class="form-control" type="password" placeholder="密码"
          minlength="6" maxlength="16"/>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <button class="btn btn-block btn-login" type="submit" onclick="login()">登录</button>
    </div>
  </div>

</form>
</div>
</body>
<script>
  function login() {
    $("#loginForm").validate({
      submitHandler: function () {
        doLogin();
      }
    });
  }
  function doLogin() {
    //加载中
    showLoading();
    var inputPass = $("#password").val();
    var salt = password_salt;
    var str = "" + salt.charAt(0) + salt.charAt(2) + inputPass + salt.charAt(5) + salt.charAt(4);
    var password = md5(str);
    $.ajax({
      url: "/login",
      type: "POST",
      data: {
        mobile: $("#mobile").val(),
        password: password
      },
      success: function (res) {
        layer.closeAll();
        if (res.code == 200) {
          layer.msg("成功");
          localStorage.setItem('accessToken', res.accessToken);
          window.location.href = `/activity_list.html?accessToken=${res.accessToken}`;
        } else {
          layer.msg(res.msg);
        }
      },
      error: function () {
        layer.closeAll();
      }
    });
  }
</script>
</html>